<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form id="form" enctype="multipart/form-data">
                <br/>
                <h2 class="title">Histórico do Bairro</h2>

                <p:growl id="messages" showDetail="false" autoUpdate="true"/> 

                <p:panel id="fatorPanel" style="background: none; border: none;" styleClass="container_24 clearfix">

                    <h4 class="title">Resultados</h4>
                    <p:dataTable id="bairroTable" var="item" value="#{managerHistoricoBairro.bairroHistoricos}" 
                                 styleClass="grid_24" rowIndexVar="rowid"
                                 rows="5" paginator="true" lazy="true"   
                                 paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                 style="white-space: pre-wrap;">

                        <f:facet name="header">
                            <p:outputLabel value="Bairro #{managerHistoricoBairro.bairroHistoricos.size() eq 0 ? '' : '('.concat(managerHistoricoBairro.bairroHistoricos.size()).concat(')')}"/>
                        </f:facet>

                        <p:column headerText="Ação" width="10">
                            <p:commandButton title="Visualizar" update=":form:dialog, @form" actionListener="#{managerHistoricoBairro.comparar(item)}"
                                             oncomplete="dlg.show()" icon="ui-icon-search">
                                <f:setPropertyActionListener target="#{managerHistoricoBairro.bairroRestaurar}" value="#{item}" />
                            </p:commandButton>
                        </p:column>

                        <p:column headerText="Usuário responsável">  
                            <h:outputText value="#{item.usuarioAtualizacao.nome}" />
                        </p:column>

                        <p:column headerText="Data de atualização">  
                            <h:outputText value="#{item.dataAtualizacao}">
                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/>
                            </h:outputText>
                        </p:column>

                    </p:dataTable> 

                </p:panel>

                <p:hotkey bind="esc" oncomplete="dlg.hide()"/>

                <p:dialog id="dialog" widgetVar="dlg" modal="true" draggable="false" closable="false"
                          width="1024" showEffect="fade" hideEffect="fade" resizable="false"
                          style="max-width: 1024px; max-height: 560px" closeOnEscape="true">

                    <div style="text-align: right">
                        <p:commandButton title="Restaurar" icon="ui-icon-transfer-e-w"
                                         value="Restaurar" oncomplete="dialogRestaurar.show()">
                        </p:commandButton>
                    </div>

                    <p:panel styleClass="container_24 clearfix withoutBorder">
                        <p:outputLabel value="Data atualização: " styleClass="grid_5"
                                       style="text-align: right !important; font-weight: bold" />
                        <h:outputText value="#{managerHistoricoBairro.bairroHistorico.dataAtualizacao}" 
                                      styleClass="grid_6"
                                      style="text-align: left !important">
                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/>
                        </h:outputText>

                        <p:outputLabel value="Usuário responsável: " styleClass="grid_5"
                                       style="text-align: right !important; font-weight: bold" />
                        <h:outputText value="#{managerHistoricoBairro.bairroHistoricoComparar.usuarioAtualizacao.nome}"
                                      styleClass="grid_6"
                                      style="text-align: left !important"/>
                    </p:panel>

                    <p:panel styleClass="container_24 clearfix withoutBorder">

                        <p:dataTable id="camposTable" var="campo" value="#{managerHistoricoBairro.campos}"
                                     styleClass="grid_24" rowIndexVar="rowid" paginator="true" lazy="true"
                                     paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                     style="white-space: pre-wrap;">

                            <p:column headerText="Campo" style="text-align: center; vertical-align: middle">  
                                <h:outputText value="#{campo.campo}"/>
                            </p:column>

                            <p:column headerText="Antes">
                                <p:panel styleClass="container_24 clearfix withoutBorder" style="background: transparent !important"
                                         rendered="#{managerUtilitario.instanceOfString(campo.valorAntigo)}">
                                    <p:outputLabel value="#{campo.valorAntigo}" />
                                </p:panel>

                                <p:panel styleClass="container_24 clearfix withoutBorder" style="background: transparent !important" 
                                         rendered="#{managerUtilitario.instanceOfCidade(campo.valorAntigo)}">
                                    <p:outputLabel value="#{campo.valorAntigo.nome}"/>
                                </p:panel>
                            </p:column>

                            <p:column headerText="Depois">
                                <p:panel styleClass="container_24 clearfix withoutBorder" style="background: transparent !important" 
                                         rendered="#{managerUtilitario.instanceOfString(campo.valorAntigo)}">
                                    <p:outputLabel value="#{campo.valorNovo}"/>
                                </p:panel>

                                <p:panel styleClass="container_24 clearfix withoutBorder" style="background: transparent !important" 
                                         rendered="#{managerUtilitario.instanceOfCidade(campo.valorAntigo)}">
                                    <p:outputLabel value="#{campo.valorNovo.nome}"/>
                                </p:panel>
                            </p:column>

                        </p:dataTable>
                    </p:panel>

                    <div class="buttonAction">
                        <p:commandButton value="Fechar" process="@this" 
                                         onclick="dlg.hide()" icon="ui-icon-close" />
                    </div>
                </p:dialog>

                <p:dialog id="restaurarDialog" widgetVar="dialogRestaurar" modal="true" 
                          height="80" closable="false" resizable="false" closeOnEscape="true">
                    <h:outputText value="Tem certeza que deseja restaurar este bairro ?" />
                    <div class="buttonAction">
                        <p:commandButton value="Sim" actionListener="#{managerHistoricoBairro.restaurar}"
                                         update="@form, :form:bairroTable" icon="ui-icon-check"/>
                        <p:commandButton value="Não" icon="ui-icon-close" oncomplete="dialogRestaurar.hide()" />
                    </div>
                </p:dialog>

            </h:form>
        </ui:define>
    </ui:composition>
</html>
